<template>
  <div class="article-content">
    <article class="article-content__wrapper">
      <div class="article-title">
        <h1>{{ props.articleContent?.title }}</h1>
      </div>

      <div class="article-meta">
        <img :src="props.articleContent?.headpic" alt="头像" />

        <div class="article-meta-info">
          <div class="author-name">{{ props.articleContent?.nickName }}</div>

          <div class="article-info">
            {{ standardDate(Number(props.articleContent?.pushDate)) }} · 阅读
            {{ props.articleContent?.readCount }}
          </div>
        </div>

        <div>
          <el-button
            v-if="
              !props.articleContent?.userFollowId && String(props.articleContent?.userId) == userId
            "
            type="primary"
            @click="toDraft"
            >编辑</el-button
          >

          <el-button
            v-else-if="typeof props.articleContent?.userFollowId === 'number'"
            type="success"
            style="width: 74px"
            plain
            @click="aa(props.articleContent?.userId as number)"
            >{{ statusd ? '已关注' : '关注' }}</el-button
          >
        </div>
      </div>

      <div class="article-img" v-if="props.articleContent?.articleImg">
        <img :src="props.articleContent?.articleImg" alt="文章封面" />
      </div>

      <div class="article-text">
        <md-editor :previewOnly="true" v-model="articleContent"></md-editor>
      </div>
    </article>
  </div>
</template>

<script setup lang="ts">
import MdEditor from 'md-editor-v3'
import 'md-editor-v3/lib/style.css'
import { onMounted, PropType, ref } from 'vue'
import { standardDate } from '/@/hooks/useNumberFilter'
import useUserFollow from '/@/hooks/useUser'
import { articleContentPorps } from './props'
import router, { useRoute } from '/@/router'

const route = useRoute()

const props = defineProps({
  articleContent: Object as PropType<articleContentPorps>
})

let statusd = ref(false)
const { EventFollow } = useUserFollow()

onMounted(() => {
  statusd.value = props.articleContent?.userFollowId ? true : false
})

const aa = (passiveFollowId: number) => {
  EventFollow(passiveFollowId, statusd.value).then((res) => {
    if (res) {
      statusd.value = !statusd.value
    } else {
      alert('请登录!')
    }
  })
}

let articleContent = ref(props.articleContent?.contentMd)

let userId = localStorage.getItem('userId')

const toDraft = () => {
  console.log(123)
  router.push(`/editor/draft/${route.params.articleId}`)
}
</script>

<script lang="ts">
export type ArticleContentPorps = articleContentPorps
</script>

<style lang="scss" scoped>
.article-content {
  width: 100%;

  max-width: 820px;

  border-radius: 4px;

  background-color: white;

  &__wrapper {
    width: 100%;
    box-sizing: border-box;
    padding: 1.8rem;

    .article-title {
      width: 100%;

      // height: 42px;
      margin: 0 0 1.667rem;
      line-height: 1.31;
      h1 {
        font-size: 2rem;
        font-weight: 600;

        color: #252933;
      }
    }

    .article-meta {
      width: 100%;
      height: 48px;

      display: flex;
      align-items: center;
      margin-bottom: 1.667rem;

      img {
        flex: 0 0 auto;
        margin-right: 1rem;
        width: 3.333rem;
        height: 3.333rem;
        border-radius: 50%;
      }

      &-info {
        min-width: 0;
        flex-grow: 1;
        flex: 1;
        min-height: 43px;

        .author-name {
          height: 1.3rem;
        }

        .article-info {
          font-size: 0.9rem;
          color: #8a919f;
          margin-top: 2px;
          line-height: 22px;
        }
      }
    }

    .article-img {
      width: 100%;

      img {
        width: 100%;

        height: 420.5px;
        position: relative;
        -o-object-fit: cover;
        object-fit: cover;
      }
    }

    .article-text {
      width: 100%;
      min-height: 66px;

      margin-top: 20px;
    }
  }
}
</style>
